import React, { forwardRef, useEffect, useState } from "react";
import { Form, Input, Select } from "antd";

import { reqRoleList, reqRegionList } from "../../api";

const UserForm = forwardRef((props, ref) => {
  const [isDisAble, setisDisAble] = useState(false);
  const { Option } = Select;
  // 监听这个值改变时 来改变这个区域里的禁用还是启用
  useEffect(() => {
    setisDisAble(props.IsUpdateDisabled);
  }, [props.IsUpdateDisabled]);

  const { roleId, region } = JSON.parse(localStorage.getItem("token")); //获取token

  // 进行设置的映射对象。避免不知道1,2,3是什么
  const roleObj = {
    1: "superadmin",
    2: "admin",
    3: "editor",
  };
  // 分别对区域的创建或更新进行设置对应的逻辑 分别进行禁用
  const checkRegionDisabled = (item) => {
    // 如果是更新使用
    if (props.isUpdate) {
      console.log(props);
      // 如果是超级管理员
      if (roleObj[roleId] === "superadmin") {
        // 就不禁用
        return false;
      } else {
        return true;
      }
    }
    // 如果是创建用户
    else {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        // 不是当前的这一项true就是可选，false就是不可选
        return item.value !== region;
      }
    }
  };
  //分别对角色的创建或更新进行设置对应的逻辑 分别进行禁用
  const checkRoleDisabled = (item) => {
    if (props.isUpdate) {
      console.log(props);
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return roleObj[item.id] !== "editor";
      }
    }
  };
  return (
    <Form
      ref={ref}
      layout="vertical" //做垂直布局的
    >
      <Form.Item //表单项
        name="username" //通过什么属性拿到表单名
        label="用户名"
        rules={[
          { required: true, message: "Please input the title of collection!" },
        ]} //表单校验
      >
        <Input />
      </Form.Item>
      <Form.Item //表单项
        name="password" //通过什么属性拿到表单名
        label="密码"
        rules={[
          { required: true, message: "Please input the title of collection!" },
        ]} //表单校验
      >
        <Input />
      </Form.Item>
      <Form.Item //表单项
        name="region" //通过什么属性拿到表单名
        label="区域"
        // 区域有下拉选项 从后端返回的接口regions 拿回来动态展示和角色一样
        //设置校验，如果可选状态为不可选，那么返回一个空数组不进行校验，否则才校验
        rules={isDisAble ? [] : [{ required: true, message: "区域不能为空!" }]} //表单校验
      >
        <Select
          //设置下拉的可选状态
          disabled={isDisAble}
          style={{ width: "100%" }}
          //下拉项根据返回的数据进行遍历然后显示（{}）
          options={props.region.map((item) => ({
            value: item.value,
            key: item.id,
            disabled: checkRegionDisabled(item),
          }))}
        />
      </Form.Item>
      <Form.Item //表单项
        name="roleId" //通过什么属性拿到表单名
        label="角色"
        rules={[
          { required: true, message: "Please input the title of collection!" },
        ]} //表单校验
      >
        <Select
          onChange={(id) => {
            console.log(id);
            if (id === 1) {
              setisDisAble(true);
              //同时设置区域的值为空
              ref.current.setFieldsValue({
                region: "全球",
              });
            } else {
              setisDisAble(false);
            }
          }}
          style={{ width: "100%" }}
        >
          {props.roleList.map((item) => (
            //给添加用户项目设置权限，不能让等级低的可以添加高等级的权限
            <Option
              value={item.id}
              key={item.id}
              disabled={checkRoleDisabled(item)}
            >
              {item.roleName}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
});
export default UserForm;
